<template>
  <div>
    <basic-container>
      <el-form inline="inline" ref="tableOptionSearch" :model="tableOptionSearch" label-width="80px" size="mini" >
          <el-form-item label="审批状态:" prop="approvalStatus">
            <el-select v-model="tableOptionSearch.approvalStatus" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in this.statusList" :key="item.label" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="报废类型:" prop="scrapType">
          <el-select v-model="tableOptionSearch.scrapType" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in this.scrapTypeList" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="设备类别:">
          <el-select v-model="tableOptionSearch.state" placeholder="请选择">
            <el-option label="默认" value="0"></el-option>
            <el-option label="默认1" value="1"></el-option>
          </el-select>
        </el-form-item> -->
          <el-form-item label="审批号：" prop="approvalNumber">
            <el-input v-model="tableOptionSearch.approvalNumber" placeholder="请输入审批号"></el-input>
          </el-form-item>
          <el-form-item  label-width="20px">
            <el-button type="primary" @click="submitForm('tableOptionSearch')">搜索</el-button>
            <el-button @click="resetForm('tableOptionSearch')">重置</el-button>
          </el-form-item>
      </el-form>

      <avue-crud :option="tableOption" :data="gridData" :table-loading="tableLoading" :page="page" ref="crud" @size-change='sizeChanges' @current-change="currentPages" >
        <template slot-scope="scope" slot="approvalStatus">
          <template v-if="scope.row.approvalStatus == 0">待审批</template>
          <template v-else-if="scope.row.approvalStatus == 1">审批中</template>
          <template v-else-if="scope.row.approvalStatus == 2">通过</template>
          <template v-else-if="scope.row.approvalStatus == 3">不通过</template>
          <el-button type="info" class="processBtn" plain size="mini" @click.stop="processBtn(scope.row)">流程<!--<span hidden="hidden">{{scope.row.state}}</span>--></el-button>
        </template>
        <template slot-scope="scope" slot="scrapType">
          <template v-if="scope.row.scrapType == 0">出售</template>
          <template v-else-if="scope.row.scrapType == 1">处理</template>
          <template v-else-if="scope.row.scrapType == 2">其他</template>
        </template>
        <template slot-scope="scope" slot="equipmentTypeName">{{ comEqType(scope.row.equipment.equipmentTypeId) }}</template>
        <template slot-scope="scope" slot="coded">{{ scope.row.equipment.coded }}</template>
        <template slot-scope="scope" slot="equipmentName">{{ scope.row.equipment.name }}</template>
        <template slot-scope="scope" slot="marking">{{ scope.row.equipment.marking }}</template>
        <template slot-scope="scope" slot="brand">{{ scope.row.equipment.brand }}</template>
        <template slot-scope="scope" slot="applyuser">
          {{scope.row.departmentName}}<span>-</span>{{ scope.row.userName }}
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button type="primary" size="small" v-show="scope.row.approvalStatus === 0 || scope.row.approvalStatus === 1" plain @click="examineModeBtn(scope.row,scope.index)">审核</el-button>
          <el-button type="primary" size="small"  plain @click="seeModeBtn(scope.row,scope.index)">查看</el-button>
          <el-button type="primary" size="small" v-show="scope.row.approvalStatus === 0"  plain @click="updModeBtn(scope.row,scope.index)">修改</el-button>
          <el-button type="primary" size="small"  v-show="scope.row.approvalStatus === 0" plain @click="tableOptionDelBtn(scope.row,scope.index)">删除</el-button>
        </template>
      </avue-crud>
    </basic-container>

    <!---流程弹窗--->
    <el-dialog title="流程" :visible.sync="processMode" width="35%">
      <div class="block">
        <ul class="el-timeline is-reverse">
          <li class="el-timeline-item" v-for="(activity, index) in activities" :key="index">
            <div class="el-timeline-item__tail"></div>
            <div class="el-timeline-item__node el-timeline-item__node--normal el-timeline-item__node--"></div>
            <div class="el-timeline-item__wrapper">
              <el-card>
                  <div class="el-timeline-item__content">
                      审批人：{{ activity.dealerName }} 　
                      <template v-if="activity.dealType == 0">待审批</template>
                      <template v-else-if="activity.dealType == 1">审批中</template>
                      <template v-else-if="activity.dealType == 2">不通过</template>
                      <template v-else-if="activity.dealType == 3">通过</template>
                  </div>
                  <div class="el-timeline-item__timestamp is-bottom">{{ activity.dealDate }}</div>
                  <h4>{{activity.dealNote}}</h4>
              </el-card>
            </div>
          </li>
        </ul>
      </div>
    </el-dialog>

    <el-dialog title="报废申请单" :visible.sync="examineMode" width="60%" center>
      <div id="printTest">
        <el-row :gutter="10">
          <el-col :span="4">审批单号：</el-col>
          <el-col :span="8">{{ checkInfo.approvalNumber }}</el-col>
        </el-row>
        <div class="lineDiv"></div>
        <el-row :gutter="10" v-if="examineModeType != 3">
          <el-col :span="4">设备类别：</el-col>
          <el-col :span="8">{{ comEqType( checkInfo.equipment.equipmentTypeId ) }}</el-col>
          <el-col :span="4">设备编码：</el-col>
          <el-col :span="8"><template v-if="checkInfo.equipment"></template>{{ checkInfo.equipment.coded }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">设备名称：</el-col>
          <el-col :span="8">{{ checkInfo.equipment.name }}</el-col>
          <el-col :span="4">型号：</el-col>
          <el-col :span="8">{{ checkInfo.equipment.marking }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">品牌：</el-col>
          <el-col :span="8">{{ checkInfo.equipment.brand }}</el-col>
          <el-col :span="4">存放位置：</el-col>
          <el-col :span="8">{{ checkInfo.locationName }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">购买价格：</el-col>
          <el-col :span="8">{{ checkInfo.price }}</el-col>
          <el-col :span="4">首次启用时间：</el-col>
          <el-col :span="8">{{ checkInfo.firstOpenTime }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">历史维保次数：</el-col>
          <el-col :span="20">{{ checkInfo.historyCount || 0 }}次（保养 {{ checkInfo.maintainCount || 0 }}次，效准 {{ checkInfo.correctCount || 0 }}次，维修 {{ checkInfo.maintenanceCount || 0 }}次）</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">历史维保总费用：</el-col>
          <el-col :span="20">{{ checkInfo.historyMoney || 0 }}元（保养 {{ checkInfo.maintainMoney || 0 }}元 ，效准{{ checkInfo.correctMoney || 0 }}元 ，维修 {{ checkInfo.maintenanceMoney || 0 }}元） </el-col>
        </el-row>
        <div class="lineDiv" v-if="examineModeType != 3"></div>
        <el-row :gutter="10" v-if="examineModeType != 3">
          <el-col :span="3">报废类型：</el-col>
          <el-col :span="5">
            <template v-if="checkInfo.scrapType == 0">出售</template>
            <template v-else-if="checkInfo.scrapType == 1">处理</template>
            <template v-else-if="checkInfo.scrapType == 2">其他</template>
          </el-col>
          <el-col :span="3">申请部门/人：</el-col>
          <el-col :span="5">{{ checkInfo.departmentName }} - {{ checkInfo.userName }}</el-col>
          <el-col :span="3">申请时间：</el-col>
          <el-col :span="5">{{ checkInfo.applicationTime }}</el-col>
        </el-row>
        <el-row :gutter="10" v-if="examineModeType != 3">
          <el-col :span="3">报废说明：</el-col>
          <el-col :span="21">{{ checkInfo.remarks }}</el-col>
        </el-row>
        <div class="lineDiv" v-if="examineModeType == 3"></div>

        <el-row :gutter="10" v-if="examineModeType == 3">
          <el-form ref="form" :rules="rules" :model="updataMode" label-width="120px" class="demo-ruleForm">
            <el-form-item label="报废类型：" prop="scrapType">
              <el-col :span="19">
                <el-select v-model="updataMode.scrapType" size="small" placeholder="请选择">
                  <el-option v-for="item in this.scrapTypeList" :key="item.label" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="报废说明：" prop="remarks">
              <el-col :span="19"><el-input type="textarea" size="small" v-model="updataMode.remarks" :autosize="{ minRows: 2, maxRows: 5}"
                                           placeholder="最多可输入50字"></el-input></el-col>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="_approvalNumberVerify(0)" v-if="examineModeType == 2">通  过</el-button>
        <el-button size="small" type="primary" @click="_approvalNumberVerify(1)" v-if="examineModeType == 2">不通过</el-button>
        <el-button size="small" type="primary" @click="examineModeSubmit('form')" v-if="examineModeType == 3">提  交</el-button>
        <el-button size="small" @click="examineMode = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!---审核备注弹窗-->
    <el-dialog :title="authModeTitle === 0 ? '通过' : '不通过'" :visible.sync="authMode" width="30%" @close="authText = ''">
      <el-input
        type="textarea"
        :rows="6"
        placeholder="请输入审核内容"
        v-model="authText">
        </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="authMode = false">关 闭</el-button>
        <el-button size="small" type="primary" @click="_approvalNumberVerifys" v-if="examineModeType == 2">{{ authModeTitle === 0 ? '通过' : '不通过' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import { validatenull } from '@/util/validate'
    import { option, jsonToArray } from "@/const-personal/equipment/aintenance/scrap-application.js"
    import { findScrapPageQuery, findById, approvalProcess, approvalNumberVerify, updateReservation, delReservation, getDevTypeList } from "@/api/equipment/aintenance/scrap-application.js"
    export default {
      data(){
        return{
          tableOptionSearch:{ //条件查询
            approvalStatus: '', // 审批类型
            scrapType: '', // 报废类型
            approvalNumber: '', // 审批号
          },
          tableLoading: false,
          tableOption: option, //表格设置属性
          gridData: [], // 表格数据
          page: {
            total: 0, //总页数
            currentPage: 1, //当前页数
            pageSize: 10 ,//每页显示多少条
            pageSizes: [5, 10, 20]
          },

          processMode: false, // 流程弹窗
          activities: [], //流程数据

          authMode: false, //通过备注弹窗
          authModeTitle: '通过',
          authText: '', // 备注弹窗 值

          checkInfo: {
            equipment: {},
          }, // 详情
          examineMode: false, // 报废申请单弹窗
          examineModeType: 0, // 按钮区分

          updataMode:{ // 修改弹窗值
            scrapType: '',
            remarks: ''
          },

          statusList: [ // 审批状态
            { value: 0, label: '待审批' },
            { value: 1, label: '审批中' },
            { value: 2, label: '通过' },
            { value: 3, label: '不通过' },
          ],
          scrapTypeList: [ // 报废类型
            { value: 0, label: '出售' },
            { value: 1, label: '处理' },
            { value: 2, label: '其他' },
          ],
          rules: {
            scrapType: [
              { required: true, message: '请选择', trigger: 'blur' }
            ],
            remarks: [
              { required: true, message: '请输入', trigger: 'blur' }
            ],
          },
          treeData:[], //设备类别



          //添加预约单数据
          tableOptionModeAddForm:{
              remarks:''
          },
          //添加预约单表单验证
          // tableOptionModeAddFormRules:tableOptionModeAddFormRules,
          //添加预约选择区间表单验证
          // tableOptionModeSelectRLDateFormRules: tableOptionModeSelectRLDateFormRules,

          tableOptionModeSelectRL: false, //添加设备选择日历
          // tableOptionAdd: optionAdd,
          // tableOptionSelect: optionSelect,
          // formOptionSelect: optionSelect,
          tableData: [], //表格的数据
          tablePage: 1,
          tabelObj: {},
          grade: {
              box: false,
              check: []
          },
          tableOptionModeAdd: false,
          tableOptionModeSelect: false,
          selectionList:[],
          tableOptionModeSelectFrom:{},


        }
      },
      computed: {
        devArrData () { // 设备类型 array
          return jsonToArray(this.treeData)
        },
        // 设备类别
        comEqType () {
          return ((type) => {
            console.log(type + 'ss')
            for (let i = 0; i < this.devArrData.length; i++) {
              if (this.devArrData[i].id == type) {
                // console.log("name:" + this.equipmentType[i].label)
                return this.devArrData[i].name
              }
            }
          })
        },
      },
      created () {
        this._getDevTypeList()
      },
      mounted () {
        this._findScrapPageQuery()
      },
      methods: {
        // 查 设备类型 接口 pw
        _getDevTypeList() {
          getDevTypeList().then(res => {
            res = res.data
            if (res.code == 200) {
              this.treeData = res.data;
            } else {
              this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
            }
          })
        },
        // 查 表格
        _findScrapPageQuery() {
          this.tableLoading = true;
          let data = {
            scrapApplication: this.tableOptionSearch,
            page: this.page.currentPage,
            size: this.page.pageSize
          }
          findScrapPageQuery(data).then(res => {
            res = res.data
            if (res.code == 200) {
              this.gridData = res.data.list;
              this.page.total = res.data.total;
              this.page.currentPage = res.data.pageNum;
              this.page.pageSize = res.data.pageSize;
              this.tableLoading = false;
            } else {
              this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
            }
          })
        },
        // 切换页面
        currentPages (val) {
          this.page.currentPage = val;
          this._findScrapPageQuery();
        },
        sizeChanges (val) {
          this.page.pageSize = val
          this._findScrapPageQuery()
        },
        // 查询详情接口
        _findById(val) {
          findById({ id: val }).then(res => {
            if (res.data.code == 200) {
              this.checkInfo = res.data.data;
            } else {
              this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
            }
          })
        },
        // 搜索
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this._findScrapPageQuery()
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        // 审核 通过2/不通过3 按钮
        _approvalNumberVerify(val) {
            this.authModeTitle = val;
            this.authMode = true;
        },
        // 通过不通过
        _approvalNumberVerifys() {
          if (!this.authText) {
            this.$notify.info("请输入审核内容");
            return
          }
          let data = {
            id: this.checkInfo.id,
            remarks: this.authText,
            status: this.authModeTitle
          }
          approvalNumberVerify(data).then(res => {
            if (res.data.code == 200) {
              this.$notify({ title: "操作成功！", type: 'success'});
              this.authMode = false;
              this.examineMode = false;
              this._findScrapPageQuery();
            } else {
              this.$notify.error({ title: '请求失败', message: res.data.message, type: 'danger' });
            }
          })
        },
        // 确认修改
        examineModeSubmit(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let data = {
                id: this.checkInfo.id,
                remarks: this.updataMode.remarks,
                scrapType: this.updataMode.scrapType
              }
              updateReservation(data).then(res => {
                if (res.data.code == 200) {
                  this.examineMode = false;
                  this.$notify({ title: '修改成功', type: 'success', });
                  this._findScrapPageQuery()
                } else {
                  this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger' });
                }
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });

        },
        // 表单重置
        resetForm(formName) {
          this.$refs[formName].resetFields();
          if (formName == 'tableOptionSearch') {
            this.page.currentPage = 1;
            this.page.pageSize = 10;
            this._findScrapPageQuery()
          }
        },
        selectionChange(list){
          this.selectionList = list
        },
        // 查看按钮
        seeModeBtn(row, index){
          this.examineModeType = 1;
          this.examineMode = true;
          this._findById(row.id)
        },
        // 审核按钮
        examineModeBtn(row, index){
          this.examineModeType = 2;
          this.examineMode = true;
          this._findById(row.id)
        },
        // 修改按钮
        updModeBtn(row, index){
          this.examineModeType = 3;
          this.examineMode = true;
          this._findById(row.id);
          this.updataMode.scrapType = this.checkInfo.scrapType;
          this.updataMode.remarks = this.checkInfo.remarks;

        },
        // 删除按钮
        tableOptionDelBtn(row, index){
          this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
          }).then(() => {
            //请求--删除
            delReservation({ id: row.id }).then(res => {
              if (res.data.code == 200) {
                this.$notify({ title: '删除成功', type: 'success', });
                this._findScrapPageQuery()
              } else {
                this.$notify.error({ title: '请求失败', message: res.message, type: 'danger' });
              }
            })
          });
        },
        // 流程 按钮
        processBtn(row){
          approvalProcess({ id: row.id }).then(res => {
            res = res.data
            if (res.code == 200) {
              this.processMode = true;
              this.activities = res.data;
            } else {
              this.$notify.error({ title: '请求失败', message: res.message, type: 'danger' });
            }
          })

        }
      }
    }
</script>
<style lang="scss" scoped>
  .el-row {
    margin-left: 20px!important;
    margin-bottom: 20px;
    .el-col-3,.el-col-4{
      font-weight: 600;
    }
  }
  .lineDiv{
    border-top: 1px solid #d6d6d6;
    margin: 0px 1% 20px 25px;
    width: 90%;
  }
  .el-dialog__body{
    padding-top: 15px;
    padding-bottom: 0px;
  }
</style>
<style lang="scss">
  .avue-crud__menu{
    min-height: 0px!important;
    margin-bottom: 0px!important;
  }
  .lunarcalendarClass{
    min-height:70px;
  }
  .lunarcalendarClass>div>div>span{
    border: 1px solid #409EFF;
    background-color: #409EFF;
    color: #FFFFFF;
    padding: 2px 13px;
    border-radius: 5px;
  }
  .zindex1>.el-form-item__content{
    z-index: -1;
  }
  .xhRed>div>label{
    color: red;
    width: 100px;
    font-size: 18px;
    padding: 3px 5px 0px 0px;
  }
  .selectMrgin>.avue-crud__tip{
    margin-top: 0px;
  }
</style>
